<template>
  <div class="app-container">
    <div style="display: flex;flex-flow: row nowrap;margin-left: 9%" class="approve-title">
      <div style="border:1px;background-color: #4e8dff; width: 6px;height: 20px"></div>
      <span style="margin-left: 10px">审核意见</span>
    </div>
    <el-form ref="form" v-loading="formLoading" :model="form" :rules="rules" label-width="140px"
             style="margin-left: 25%; ">
      <el-row>
        <el-col :span="16">
          <el-form-item label="审核结果" prop="apprStatusTemp">
            <el-radio-group v-model="form.apprStatusTemp" @change="approveStatusChangeHandler">
              <el-radio
                v-for="dict in dict.type.sys_user_appr_opeator"
                :key="dict.value"
                :label="dict.value"
              >{{ dict.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="showOppinionBool">
        <el-col :span="18">
          <el-form-item label="审核意见" prop="rejectReason">
            <el-input
              type="textarea"
              :rows="5"
              v-emoji
              placeholder="请填写审核意见"
              v-model="form.rejectReason"
              maxlength="200"
              class="textareaH"
              show-word-limit>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "approveForm",
  dicts: ['sys_user_appr_opeator'],
  data() {
    return {
      formLoading: false,
      form: {apprStatusTemp:'',rejectReason:''},
      rules: {
        apprStatusTemp: [
          {required: true, message: "请选择审核结果", trigger: "change"}
        ],
        rejectReason: [
          {required: true, message: "请填写审核意见", trigger: "change"}
        ],
      },
      showOppinionBool: false,
    }
  },
  methods: {
    getApproveForm() {
      return new Promise((resolve, reject) => {
        this.$refs["form"].validate(valid => {
          if (valid) {
            resolve(this.form)
          } else {
            reject(valid)
          }
        })
      })
    },
    approveStatusChangeHandler(data) {
      if (data < 0) {
        this.showOppinionBool = true;
      } else {
        this.showOppinionBool = false;
        this.form.rejectReason = ''
      }
    }
  }
}
</script>

<style scoped>
.textareaH /deep/textarea{
  height: 140px;
}
</style>
